<template>
    <div class="main-cont box box-align-center box-pack-center" v-loading="loading" element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
        <el-dialog title="您好，请选择角色" class="" :visible.sync="dialogVisible" width="804px" center v-if="this.roles.length != 1"
            :before-close="handleClose" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="box box-align-center box-pack-center cont">
                <div class="list box box-align-center box-pack-center cp" :class="{ checked: current == index }"
                    v-for="(role, index) in roles" :key="index" @click="selectrole(role, index)">
                    <span>{{ role.roleName }}</span>
                    <div class="posa">
                        <div class="circle">
                            <i class="el-icon-check"></i>
                        </div>
                    </div>
                </div>
            </div>

            <span slot="footer" class=" btn">
                <el-button class="reset-comfirm-btn" @click="doselect">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            usercode: "",
            roles: [],
            user: {},
            current: 0,
            dialogVisible: false,
            showbtn: false,
            selectedRole: {},
            loading: true
        }
    },
    mounted() {
        this.usercode = this.$route.query.usercode;
        this.getRoles();
    },
    methods: {
        getRoles() {
            this.$api.role.getRolesByUserCode({
                usercode: this.usercode
            }).then(res => {
                if (res.code == '0') {
                    this.roles = res.roles;
                    // console.log(this.usercode)
                    console.log(this.roles)
                    // console.log(res.user)
                    this.user = res.user;
                    this.selectedRole = res.roles[0]
                    this.$store.commit("setSelectedRole", this.selectedRole);
                    if (res.roles.length == 1) {
                        this.doselect()
                    } else {
                        this.dialogVisible = true;
                        this.loading = false;
                    }
                }
            })
        },
        selectrole(role, index) {
            this.selectedRole = role;
            console.log(role)
            this.current = index;
            console.log(this.selectedRole.roleCode)
            this.$store.commit("setSelectedRole", this.selectedRole);
        },
        doselect() {
            this.loading = true;
            this.dialogVisible = false;
            let params = {
                usercode: this.user.userCode,
                pwd: this.user.password,
                role: this.selectedRole.roleCode,
                rolename: this.selectedRole.roleName,
                mobile: this.user.mobile
            };
            console.log(params)
            this.$api.login.autologin(params).then(res => {
                // console.log(res);
                if (res.result == "success") {
                    //处理缓存
                    this.$store.commit("setLoginInfo", res);
                    this.$store.commit("setUser", res.user);
                    localStorage.setItem('token', res.token);
                    this.$store.commit("setMaxRole", res.roleCode);
                    this.$store.commit("setToken", res.token);
                    this.$store.commit("setLogo", res.logoUrl);
                    this.$store.commit("setSchoolName", res.schoolName);
                    this.$store.commit("setSchoolId", res.user.schoolId);
                    // console.log(res.user.schoolId)
                    // console.log(res)

                    //处理跳转
                    this.loading = false;
                    this.goPath(res.menus)
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //跳转页面
        goPath(menus){
            if(menus[0].childrens.length>0){
                this.$router.push(menus[0].childrens[0].path)
            }else{
                this.$router.push(menus[0].path)
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }

    },
}
</script>

<style scoped lang="scss">
.main-cont>>>.el-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
}

.btn .reset-comfirm-btn {
    width: 300px;
    height: 42px;
    background: linear-gradient(-13deg, #626BF1, #989BFA);
    border-radius: 19px;
    color: #fff;
    font-size: 17px;
}

.main-cont {
    position: relative;
    background-color: #898ddd;
    background-size: 100%;
}

.cont {
    padding: 50px 0;
}

.list {
    position: relative;
    width: 282px;
    height: 126px;
    background: #F8F9FC;
    border-radius: 12px;
    font-size: 24px;
    margin-right: 50px;
    border: 2px solid #FCFDFF;
    transition: .3s ease-in-out;

    &:last-child {
        margin-right: 0;
    }

    &.checked {
        color: #626BF1;
        background: #FCFDFF;
        border: 2px solid #626BF1;

        .posa .circle {
            background: #626BF1;

            i {
                display: inline-block !important;
                color: #fff;
                position: absolute;
                top: 1px;
            }
        }
    }

    .posa {
        position: absolute;
        top: 10px;
        right: 10px;

        .circle {
            width: 24px;
            height: 24px;
            background: #FFFFFF;
            border: 1px solid #D6DBE7;
            border-radius: 50%;

            i {
                display: none;
            }
        }
    }
}

.list:hover {
    color: #626BF1;
    background: #FCFDFF;
    border: 2px solid #626BF1;

}
</style>
